<%@ page pageEncoding="utf-8" import="java.util.*" %>
<%@ page import="com.listener.pojo.Pokemon" %>
<html>
<head>
    <jsp:include page="head.jsp">
        <jsp:param name="title" value="宝可梦全国图鉴"/>
    </jsp:include>
    <style>
        body{
            background-color:#18152a;
            background-image:url("<%=request.getContextPath()%>/img/eeveeBackground.jpg");
            background-size:cover;
        }
        .backgroundDiv{
            position: absolute;
            z-index:-1;
            background-color: #18152a;
            opacity: 0.8;
            width: 100%;
            height: 100%
        }
        .eeveeName .backgroundDiv{
            transition:0.3s;
            opacity: 0.4;
        }
        .eeveeName:hover .backgroundDiv{
            opacity: 0.6;
        }
        .eeveeName a {
            text-decoration: none;
            justify-content: center;
            align-items: center;
        }
        .eeveeName *{
            display: flex;
            color: white;
        }
        .eeveeName{
            display: flex;
            justify-content: center;
            align-items: center;
            position: relative;
        }
        .eeveeName img {
            height:40px;
        }
    </style>
</head>
<body>
<jsp:include page="/web/nav.jsp">
    <jsp:param name="fun" value=""/>
</jsp:include>
<div>
    <%
        Map<String,String> typeColors= (Map<String, String>) session.getAttribute("typeColors");
        List<Pokemon> eevees= (List<Pokemon>) request.getAttribute("eevees");
        int eS=eevees.size();
        if(eevees!=null && eS>0){
    %>
    <div id="demo" class="carousel slide" data-ride="carousel">
        <!-- Indicators -->
        <ul class="carousel-indicators">
            <%
                for (int i=0;i<eS;i++) {
            %>
            <li data-target="#demo" data-slide-to="<%=i%>"  class="<%=(i==0)?"active":""%>"></li>
            <%
                }
            %>
        </ul>
        <!-- 幻灯片包装器 -->
        <div class="carousel-inner" align="center">
            <%
                int index=0;
                for (Pokemon eevee : eevees) {
                    index++;
            %>
            <div class="carousel-item <%=(index==1)?"active":""%>" >
                <div class="backgroundDiv"></div>
                <img src="<%=request.getContextPath()%>/<%=eevee.getPicture()%>" alt="<%=eevee.getPokemon()%>"
                     width="550" height="550">
                <div class="carousel-caption" >
                    <div class="eeveeName">
                        <div class="backgroundDiv"
                             style="background-color:<%=typeColors.get(eevee.getType())%>"></div>
                        <a href="<%=request.getContextPath()%>/detailsOfPokemonPage?pokemon=<%=eevee.getPokemon()%>">
                             <h2><%=eevee.getPokemon()%></h2>
                            <img src="<%=request.getContextPath()%>/img/type/<%=eevee.getType()%>.png"/>
                        </a>
                    </div>
                </div>

            </div>
            <%
                }
            %>
        </div>
        <!-- 左右控件 -->
        <a class="carousel-control-prev" href="#demo" data-slide="prev">
            <span class="carousel-control-prev-icon"></span>
        </a>
        <a class="carousel-control-next" href="#demo" data-slide="next">
            <span class="carousel-control-next-icon"></span>
        </a>
    </div>
    <%
        }
    %>
</div>
</body>
</html>
